import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:gourmet/color/hex.dart';
import 'package:gourmet/route/index.dart';
import 'package:gourmet/utils/colors.dart';
import 'package:gourmet/utils/styles.dart';
import 'package:gourmet/utils/svg.dart';
import 'package:gourmet/utils/tools.dart';

class ShopCartController extends GetxController
    with GetTickerProviderStateMixin {
  List<String> tags = ['30减1', '60减2'];

  RxBool isOpen = RxBool(true);

  late AnimationController controller;

  late Animation<double> animation;

  @override
  void onInit() {
    controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    );
    animation = CurvedAnimation(
      parent: controller,
      curve: Curves.linear,
    );
    controller.forward();
    super.onInit();
  }

  @override
  void onClose() {
    controller.dispose();
    super.onClose();
  }
}

class ShopCartPage extends GetView<ShopCartController> {
  const ShopCartPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: HexColor(ColorsUtils.colorF5f5),
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(44 + Get.mediaQuery.padding.top),
        child: AnnotatedRegion<SystemUiOverlayStyle>(
          value: SystemUiOverlayStyle.dark,
          child: Padding(
            padding: EdgeInsets.only(
                top: Get.mediaQuery.padding.top, left: 15, right: 15),
            child: SizedBox(
              height: 44,
              child: Row(
                children: [
                  GestureDetector(
                    onTap: Get.back,
                    child: Center(
                      child: Text.rich(
                        TextSpan(
                          children: [
                            WidgetSpan(
                                child: Icon(
                                  CupertinoIcons.chevron_back,
                                  size: 18,
                                  color: HexColor(ColorsUtils.color0000),
                                ),
                                alignment: PlaceholderAlignment.middle),
                            TextSpan(
                              text: ' 购物车',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color0000,
                                  fontSize: StylesUtils.fontSize16,
                                  fontWeight: FontWeight.w700),
                            )
                          ],
                        ),
                      ),
                    ),
                  ),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(left: 15),
                      child: Align(
                        alignment: Alignment.centerLeft,
                        child: Text.rich(
                          TextSpan(
                            children: [
                              WidgetSpan(
                                child: Icon(
                                  CupertinoIcons.placemark,
                                  size: 15,
                                  color: HexColor(ColorsUtils.color0000),
                                ),
                              ),
                              TextSpan(
                                text: '北海长青公园 ',
                                style: StylesUtils.customTextStyle(
                                    fontSize: StylesUtils.fontSize13,
                                    color: ColorsUtils.color0000),
                              ),
                              WidgetSpan(
                                child: Icon(
                                  CupertinoIcons.chevron_down,
                                  size: 13,
                                  color: HexColor(ColorsUtils.color6666),
                                ),
                                alignment: PlaceholderAlignment.middle,
                              )
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                  Center(
                    child: GestureDetector(
                      onTap: () {
                        Get.toNamed(Routes.shopCartEdit);
                      },
                      child: Text.rich(
                        TextSpan(
                          children: [
                            TextSpan(
                              text: '编辑',
                              style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize15,
                                  color: ColorsUtils.color0000),
                            )
                          ],
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              margin: const EdgeInsets.only(top: 10),
              alignment: Alignment.center,
              child: Container(
                width: 345,
                padding: const EdgeInsets.all(15),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Column(
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        checkbox,
                        Expanded(
                          child: Padding(
                            padding: const EdgeInsets.only(left: 10),
                            child: Column(
                              children: [
                                Align(
                                  alignment: Alignment.topLeft,
                                  child: Text.rich(
                                    TextSpan(
                                      children: [
                                        TextSpan(
                                          text: '华莱士-凤凰广场2店 ',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize15,
                                              color: ColorsUtils.color0000,
                                              fontWeight: FontWeight.w700),
                                        ),
                                        WidgetSpan(
                                            child: Icon(
                                              CupertinoIcons.chevron_right,
                                              color: HexColor(
                                                  ColorsUtils.color9999),
                                              size: 12,
                                            ),
                                            alignment:
                                                PlaceholderAlignment.middle)
                                      ],
                                    ),
                                  ),
                                ),
                                Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  alignment: Alignment.centerLeft,
                                  child: Wrap(
                                    spacing: 10,
                                    children: controller.tags
                                        .map(
                                          (str) => Builder(
                                            builder: (_) {
                                              final style =
                                                  StylesUtils.customTextStyle(
                                                      fontSize: StylesUtils
                                                          .fontSize12,
                                                      color: ColorsUtils
                                                          .colorFf64);
                                              double width =
                                                  ToolsUtils.calculateTextWidth(
                                                      style: style, value: str);
                                              return Container(
                                                constraints:
                                                    BoxConstraints.expand(
                                                        width: width + 15,
                                                        height: 20),
                                                alignment: Alignment.center,
                                                decoration: BoxDecoration(
                                                  borderRadius:
                                                      BorderRadius.circular(2),
                                                  border: Border.all(
                                                    color: HexColor(
                                                        ColorsUtils.colorFf64),
                                                  ),
                                                ),
                                                child: Text(
                                                  str,
                                                  style: style,
                                                ),
                                              );
                                            },
                                          ),
                                        )
                                        .toList(),
                                  ),
                                )
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 15),
                      child: Row(
                        children: [
                          checkbox,
                          Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 10),
                            child: Image.network(
                              'https://img1.baidu.com/it/u=4078247928,1880753920&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                              width: 60,
                              height: 60,
                              fit: BoxFit.fill,
                            ),
                          ),
                          Expanded(
                            child: Column(
                              children: [
                                Align(
                                  alignment: Alignment.topLeft,
                                  child: Text(
                                    '香辣鸡块汉堡包',
                                    style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize16,
                                        color: ColorsUtils.color0000),
                                  ),
                                ),
                                Padding(
                                  padding: const EdgeInsets.only(top: 20),
                                  child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Text(
                                        '￥25',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize15,
                                            fontWeight: FontWeight.w700,
                                            color: ColorsUtils.color0000),
                                      ),
                                      CustomPaint(
                                        painter: _MyAddOrReduce(),
                                        child: Wrap(
                                          spacing: 0,
                                          children: [
                                            Container(
                                              constraints:
                                                  const BoxConstraints.expand(
                                                      width: 25, height: 20),
                                              decoration: BoxDecoration(
                                                border: Border(
                                                  right: BorderSide(
                                                    color: ColorsUtils.rgba(
                                                        242, 242, 242, 1),
                                                  ),
                                                ),
                                              ),
                                              alignment: Alignment.center,
                                              child: Text(
                                                '-',
                                                style:
                                                    StylesUtils.customTextStyle(
                                                  color: ColorsUtils.color0000,
                                                ),
                                              ),
                                            ),
                                            Builder(
                                              builder: (_) {
                                                const str = '1';
                                                final style =
                                                    StylesUtils.customTextStyle(
                                                        fontSize: StylesUtils
                                                            .fontSize13,
                                                        color: ColorsUtils
                                                            .color0000);
                                                double width = ToolsUtils
                                                    .calculateTextWidth(
                                                        value: str,
                                                        style: style);
                                                double maxWidth =
                                                    width > 30 ? width + 5 : 30;
                                                return Container(
                                                  constraints: BoxConstraints(
                                                      minWidth: 30,
                                                      maxWidth: maxWidth,
                                                      maxHeight: 20,
                                                      minHeight: 20),
                                                  alignment: Alignment.center,
                                                  child: Text(
                                                    str,
                                                    style: style,
                                                  ),
                                                );
                                              },
                                            ),
                                            Container(
                                              constraints:
                                                  const BoxConstraints.expand(
                                                      width: 25, height: 20),
                                              decoration: BoxDecoration(
                                                border: Border(
                                                  left: BorderSide(
                                                    color: ColorsUtils.rgba(
                                                        242, 242, 242, 1),
                                                  ),
                                                ),
                                              ),
                                              alignment: Alignment.center,
                                              child: Text(
                                                '+',
                                                style:
                                                    StylesUtils.customTextStyle(
                                                  color: ColorsUtils.color0000,
                                                ),
                                              ),
                                            )
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                )
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                    Row(
                      children: [
                        checkbox,
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 10),
                          child: Image.network(
                            'https://img1.baidu.com/it/u=3313129129,265706034&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                            width: 60,
                            height: 60,
                            fit: BoxFit.fill,
                          ),
                        ),
                        Expanded(
                          child: Column(
                            children: [
                              Align(
                                alignment: Alignment.topLeft,
                                child: Text(
                                  '百事可乐',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize16,
                                      color: ColorsUtils.color0000),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.symmetric(vertical: 8),
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  '中杯',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize13,
                                      color: ColorsUtils.color7979),
                                ),
                              ),
                              Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    '￥8',
                                    style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize15,
                                        fontWeight: FontWeight.w700,
                                        color: ColorsUtils.color0000),
                                  ),
                                  CustomPaint(
                                    painter: _MyAddOrReduce(),
                                    child: Wrap(
                                      spacing: 0,
                                      children: [
                                        Container(
                                          constraints:
                                              const BoxConstraints.expand(
                                                  width: 25, height: 20),
                                          decoration: BoxDecoration(
                                            border: Border(
                                              right: BorderSide(
                                                color: ColorsUtils.rgba(
                                                    242, 242, 242, 1),
                                              ),
                                            ),
                                          ),
                                          alignment: Alignment.center,
                                          child: Text(
                                            '-',
                                            style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color0000,
                                            ),
                                          ),
                                        ),
                                        Builder(builder: (_) {
                                          const str = '1';
                                          final style =
                                              StylesUtils.customTextStyle(
                                                  fontSize:
                                                      StylesUtils.fontSize13,
                                                  color: ColorsUtils.color0000);
                                          double width =
                                              ToolsUtils.calculateTextWidth(
                                                  value: str, style: style);
                                          double maxWidth =
                                              width > 30 ? width + 5 : 30;
                                          return Container(
                                            constraints: BoxConstraints(
                                                minWidth: 30,
                                                maxWidth: maxWidth,
                                                maxHeight: 20,
                                                minHeight: 20),
                                            alignment: Alignment.center,
                                            child: Text(
                                              str,
                                              style: style,
                                            ),
                                          );
                                        }),
                                        Container(
                                          constraints:
                                              const BoxConstraints.expand(
                                                  width: 25, height: 20),
                                          decoration: BoxDecoration(
                                            border: Border(
                                              left: BorderSide(
                                                color: ColorsUtils.rgba(
                                                    242, 242, 242, 1),
                                              ),
                                            ),
                                          ),
                                          alignment: Alignment.center,
                                          child: Text(
                                            '+',
                                            style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color0000,
                                            ),
                                          ),
                                        )
                                      ],
                                    ),
                                  ),
                                ],
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 15),
                      child: Row(
                        children: [
                          checkboxDis,
                          Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 10),
                            child: Opacity(
                              opacity: 0.3,
                              child: Stack(
                                children: [
                                  Image.network(
                                    'https://img0.baidu.com/it/u=3602062590,792493421&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=395',
                                    width: 60,
                                    height: 60,
                                    fit: BoxFit.fill,
                                  ),
                                  Positioned.fill(
                                      child: Center(
                                    child: Text(
                                      '已失效',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color0000,
                                          fontSize: StylesUtils.fontSize12),
                                    ),
                                  ))
                                ],
                              ),
                            ),
                          ),
                          Expanded(
                              child: Column(
                            children: [
                              Opacity(
                                opacity: 0.3,
                                child: Align(
                                  alignment: Alignment.topLeft,
                                  child: Text(
                                    '香辣鸡翅',
                                    style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize16,
                                        color: ColorsUtils.color0000),
                                  ),
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.only(top: 20),
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Opacity(
                                      opacity: 0.3,
                                      child: Text(
                                        '￥25',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize15,
                                            fontWeight: FontWeight.w700,
                                            color: ColorsUtils.color0000),
                                      ),
                                    ),
                                    CustomPaint(
                                      painter: _MyAddOrReduce(),
                                      child: Wrap(
                                        spacing: 0,
                                        children: [
                                          Container(
                                            constraints:
                                                const BoxConstraints.expand(
                                                    width: 25, height: 20),
                                            decoration: BoxDecoration(
                                                border: Border(
                                                    right: BorderSide(
                                                        color: ColorsUtils.rgba(
                                                            242,
                                                            242,
                                                            242,
                                                            1)))),
                                            alignment: Alignment.center,
                                            child: Text(
                                              '-',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                color: ColorsUtils.color0000,
                                              ),
                                            ),
                                          ),
                                          Builder(builder: (_) {
                                            const str = '1';
                                            final style =
                                                StylesUtils.customTextStyle(
                                                    fontSize:
                                                        StylesUtils.fontSize13,
                                                    color:
                                                        ColorsUtils.color0000);
                                            double width =
                                                ToolsUtils.calculateTextWidth(
                                                    value: str, style: style);
                                            double maxWidth =
                                                width > 30 ? width + 5 : 30;
                                            return Container(
                                              constraints: BoxConstraints(
                                                  minWidth: 30,
                                                  maxWidth: maxWidth,
                                                  maxHeight: 20,
                                                  minHeight: 20),
                                              alignment: Alignment.center,
                                              child: Text(
                                                str,
                                                style: style,
                                              ),
                                            );
                                          }),
                                          Container(
                                            constraints:
                                                const BoxConstraints.expand(
                                                    width: 25, height: 20),
                                            decoration: BoxDecoration(
                                                border: Border(
                                                    left: BorderSide(
                                                        color: ColorsUtils.rgba(
                                                            242,
                                                            242,
                                                            242,
                                                            1)))),
                                            alignment: Alignment.center,
                                            child: Text(
                                              '+',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                color: ColorsUtils.color0000,
                                              ),
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              )
                            ],
                          ))
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 10),
              alignment: Alignment.center,
              child: Container(
                alignment: Alignment.center,
                constraints:
                    const BoxConstraints.expand(width: 150, height: 25),
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(13)),
                child: Obx(() => GestureDetector(
                      onTap: () {
                        controller.isOpen.value = !controller.isOpen.value;
                        if (controller.isOpen.isTrue) {
                          controller.controller.forward();
                          return;
                        }
                        controller.controller.reverse();
                      },
                      child: Text.rich(TextSpan(
                          text:
                              '${controller.isOpen.isTrue ? '收起' : '展开'}不可购买商品 ',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color7979,
                              fontSize: StylesUtils.fontSize12),
                          children: [
                            WidgetSpan(
                                child: Icon(
                                  controller.isOpen.isTrue
                                      ? CupertinoIcons.chevron_down
                                      : CupertinoIcons.chevron_up,
                                  size: 13,
                                  color: HexColor(ColorsUtils.color9999),
                                ),
                                alignment: PlaceholderAlignment.middle)
                          ])),
                    )),
              ),
            ),
            ScaleTransition(
              scale: controller.animation,
              child: Obx(() {
                if (controller.isOpen.isTrue) {
                  return Column(
                    children: [
                      Container(
                        margin: const EdgeInsets.only(top: 10),
                        alignment: Alignment.center,
                        child: Container(
                          width: 345,
                          padding: const EdgeInsets.all(15),
                          decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(10)),
                          child: Column(
                            children: [
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  checkboxDis,
                                  Expanded(
                                      child: Padding(
                                    padding: const EdgeInsets.only(left: 10),
                                    child: Column(
                                      children: [
                                        Align(
                                          alignment: Alignment.topLeft,
                                          child: Text.rich(TextSpan(children: [
                                            TextSpan(
                                                text: '华莱士 (中山公园店) ',
                                                style:
                                                    StylesUtils.customTextStyle(
                                                        fontSize: StylesUtils
                                                            .fontSize15,
                                                        color: ColorsUtils
                                                            .color0000,
                                                        fontWeight:
                                                            FontWeight.w700)),
                                            WidgetSpan(
                                                child: Icon(
                                                  CupertinoIcons.chevron_right,
                                                  color: HexColor(
                                                      ColorsUtils.color9999),
                                                  size: 12,
                                                ),
                                                alignment: PlaceholderAlignment
                                                    .middle),
                                            TextSpan(
                                                text: ' ',
                                                style:
                                                    StylesUtils.customTextStyle(
                                                        fontSize: StylesUtils
                                                            .fontSize15,
                                                        color: ColorsUtils
                                                            .color0000,
                                                        fontWeight:
                                                            FontWeight.w700)),
                                            WidgetSpan(
                                                child: Container(
                                                  constraints:
                                                      const BoxConstraints
                                                          .expand(
                                                          width: 45,
                                                          height: 16),
                                                  alignment: Alignment.center,
                                                  decoration: BoxDecoration(
                                                      color: HexColor(
                                                          ColorsUtils
                                                              .color9999),
                                                      borderRadius:
                                                          BorderRadius.circular(
                                                              2)),
                                                  child: Text(
                                                    '已休息',
                                                    style: StylesUtils
                                                        .customTextStyle(
                                                            fontSize: StylesUtils
                                                                .fontSize12),
                                                  ),
                                                ),
                                                alignment:
                                                    PlaceholderAlignment.middle)
                                          ])),
                                        ),
                                        Container(
                                          margin:
                                              const EdgeInsets.only(top: 10),
                                          alignment: Alignment.centerLeft,
                                          child: Wrap(
                                            spacing: 10,
                                            children: controller.tags
                                                .map(
                                                    (str) =>
                                                        Builder(builder: (_) {
                                                          final style = StylesUtils
                                                              .customTextStyle(
                                                                  fontSize:
                                                                      StylesUtils
                                                                          .fontSize12,
                                                                  color: ColorsUtils
                                                                      .colorFf64);
                                                          double width = ToolsUtils
                                                              .calculateTextWidth(
                                                                  style: style,
                                                                  value: str);
                                                          return Container(
                                                            constraints:
                                                                BoxConstraints.expand(
                                                                    width:
                                                                        width +
                                                                            15,
                                                                    height: 20),
                                                            alignment: Alignment
                                                                .center,
                                                            decoration: BoxDecoration(
                                                                borderRadius:
                                                                    BorderRadius
                                                                        .circular(
                                                                            2),
                                                                border: Border.all(
                                                                    color: HexColor(
                                                                        ColorsUtils
                                                                            .colorFf64))),
                                                            child: Text(
                                                              str,
                                                              style: style,
                                                            ),
                                                          );
                                                        }))
                                                .toList(),
                                          ),
                                        )
                                      ],
                                    ),
                                  ))
                                ],
                              ),
                              Padding(
                                padding: const EdgeInsets.only(top: 15),
                                child: Row(
                                  children: [
                                    checkboxDis,
                                    Padding(
                                      padding: const EdgeInsets.symmetric(
                                          horizontal: 10),
                                      child: Image.network(
                                        'https://img1.baidu.com/it/u=4078247928,1880753920&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                                        width: 60,
                                        height: 60,
                                        fit: BoxFit.fill,
                                      ),
                                    ),
                                    Expanded(
                                        child: Column(
                                      children: [
                                        Align(
                                          alignment: Alignment.topLeft,
                                          child: Text(
                                            '香辣鸡翅',
                                            style: StylesUtils.customTextStyle(
                                                fontSize:
                                                    StylesUtils.fontSize16,
                                                color: ColorsUtils.color0000),
                                          ),
                                        ),
                                        Padding(
                                          padding:
                                              const EdgeInsets.only(top: 20),
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: [
                                              Text(
                                                '￥20',
                                                style:
                                                    StylesUtils.customTextStyle(
                                                        fontSize: StylesUtils
                                                            .fontSize15,
                                                        fontWeight:
                                                            FontWeight.w700,
                                                        color: ColorsUtils
                                                            .color0000),
                                              ),
                                              CustomPaint(
                                                painter: _MyAddOrReduce(),
                                                child: Wrap(
                                                  spacing: 0,
                                                  children: [
                                                    Container(
                                                      constraints:
                                                          const BoxConstraints
                                                              .expand(
                                                              width: 25,
                                                              height: 20),
                                                      decoration: BoxDecoration(
                                                          border: Border(
                                                              right: BorderSide(
                                                                  color: ColorsUtils
                                                                      .rgba(
                                                                          242,
                                                                          242,
                                                                          242,
                                                                          1)))),
                                                      alignment:
                                                          Alignment.center,
                                                      child: Text(
                                                        '-',
                                                        style: StylesUtils
                                                            .customTextStyle(
                                                          color: ColorsUtils
                                                              .color0000,
                                                        ),
                                                      ),
                                                    ),
                                                    Builder(builder: (_) {
                                                      const str = '1';
                                                      final style = StylesUtils
                                                          .customTextStyle(
                                                              fontSize:
                                                                  StylesUtils
                                                                      .fontSize13,
                                                              color: ColorsUtils
                                                                  .color0000);
                                                      double width = ToolsUtils
                                                          .calculateTextWidth(
                                                              value: str,
                                                              style: style);
                                                      double maxWidth =
                                                          width > 30
                                                              ? width + 5
                                                              : 30;
                                                      return Container(
                                                        constraints:
                                                            BoxConstraints(
                                                                minWidth: 30,
                                                                maxWidth:
                                                                    maxWidth,
                                                                maxHeight: 20,
                                                                minHeight: 20),
                                                        alignment:
                                                            Alignment.center,
                                                        child: Text(
                                                          str,
                                                          style: style,
                                                        ),
                                                      );
                                                    }),
                                                    Container(
                                                      constraints:
                                                          const BoxConstraints
                                                              .expand(
                                                              width: 25,
                                                              height: 20),
                                                      decoration: BoxDecoration(
                                                          border: Border(
                                                              left: BorderSide(
                                                                  color: ColorsUtils
                                                                      .rgba(
                                                                          242,
                                                                          242,
                                                                          242,
                                                                          1)))),
                                                      alignment:
                                                          Alignment.center,
                                                      child: Text(
                                                        '+',
                                                        style: StylesUtils
                                                            .customTextStyle(
                                                          color: ColorsUtils
                                                              .color0000,
                                                        ),
                                                      ),
                                                    )
                                                  ],
                                                ),
                                              ),
                                            ],
                                          ),
                                        )
                                      ],
                                    ))
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      Container(
                        margin: const EdgeInsets.only(top: 10),
                        alignment: Alignment.center,
                        child: Container(
                          width: 345,
                          padding: const EdgeInsets.all(15),
                          decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(10)),
                          child: Column(
                            children: [
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  checkboxDis,
                                  Expanded(
                                      child: Padding(
                                    padding: const EdgeInsets.only(left: 10),
                                    child: Column(
                                      children: [
                                        Align(
                                          alignment: Alignment.topLeft,
                                          child: Text.rich(TextSpan(children: [
                                            TextSpan(
                                                text: '华莱士 (世纪广场店) ',
                                                style:
                                                    StylesUtils.customTextStyle(
                                                        fontSize: StylesUtils
                                                            .fontSize15,
                                                        color: ColorsUtils
                                                            .color0000,
                                                        fontWeight:
                                                            FontWeight.w700)),
                                            WidgetSpan(
                                                child: Icon(
                                                  CupertinoIcons.chevron_right,
                                                  color: HexColor(
                                                      ColorsUtils.color9999),
                                                  size: 12,
                                                ),
                                                alignment:
                                                    PlaceholderAlignment.middle)
                                          ])),
                                        ),
                                        Container(
                                          margin:
                                              const EdgeInsets.only(top: 10),
                                          alignment: Alignment.centerLeft,
                                          child: Wrap(
                                            spacing: 10,
                                            children: controller.tags
                                                .map(
                                                    (str) =>
                                                        Builder(builder: (_) {
                                                          final style = StylesUtils
                                                              .customTextStyle(
                                                                  fontSize:
                                                                      StylesUtils
                                                                          .fontSize12,
                                                                  color: ColorsUtils
                                                                      .colorFf64);
                                                          double width = ToolsUtils
                                                              .calculateTextWidth(
                                                                  style: style,
                                                                  value: str);
                                                          return Container(
                                                            constraints:
                                                                BoxConstraints.expand(
                                                                    width:
                                                                        width +
                                                                            15,
                                                                    height: 20),
                                                            alignment: Alignment
                                                                .center,
                                                            decoration: BoxDecoration(
                                                                borderRadius:
                                                                    BorderRadius
                                                                        .circular(
                                                                            2),
                                                                border: Border.all(
                                                                    color: HexColor(
                                                                        ColorsUtils
                                                                            .colorFf64))),
                                                            child: Text(
                                                              str,
                                                              style: style,
                                                            ),
                                                          );
                                                        }))
                                                .toList(),
                                          ),
                                        )
                                      ],
                                    ),
                                  ))
                                ],
                              ),
                              Padding(
                                padding: const EdgeInsets.only(top: 15),
                                child: Row(
                                  children: [
                                    checkboxDis,
                                    Padding(
                                      padding: const EdgeInsets.symmetric(
                                          horizontal: 10),
                                      child: Opacity(
                                        opacity: 0.3,
                                        child: Stack(
                                          children: [
                                            Image.network(
                                              'https://img1.baidu.com/it/u=4078247928,1880753920&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                                              width: 60,
                                              height: 60,
                                              fit: BoxFit.fill,
                                            ),
                                            Positioned.fill(
                                                child: Center(
                                              child: Text(
                                                '未开售',
                                                style:
                                                    StylesUtils.customTextStyle(
                                                        fontSize: StylesUtils
                                                            .fontSize13,
                                                        color: ColorsUtils
                                                            .color0000),
                                              ),
                                            ))
                                          ],
                                        ),
                                      ),
                                    ),
                                    Expanded(
                                        child: Column(
                                      children: [
                                        Align(
                                          alignment: Alignment.topLeft,
                                          child: Opacity(
                                            opacity: 0.3,
                                            child: Text(
                                              '香辣鸡翅',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                      fontSize: StylesUtils
                                                          .fontSize16,
                                                      color: ColorsUtils
                                                          .color0000),
                                            ),
                                          ),
                                        ),
                                        Padding(
                                          padding:
                                              const EdgeInsets.only(top: 20),
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: [
                                              Opacity(
                                                  opacity: 0.3,
                                                  child: Text(
                                                    '￥20',
                                                    style: StylesUtils
                                                        .customTextStyle(
                                                            fontSize:
                                                                StylesUtils
                                                                    .fontSize15,
                                                            fontWeight:
                                                                FontWeight.w700,
                                                            color: ColorsUtils
                                                                .color0000),
                                                  )),
                                              CustomPaint(
                                                painter: _MyAddOrReduce(),
                                                child: Wrap(
                                                  spacing: 0,
                                                  children: [
                                                    Container(
                                                      constraints:
                                                          const BoxConstraints
                                                              .expand(
                                                              width: 25,
                                                              height: 20),
                                                      decoration: BoxDecoration(
                                                          border: Border(
                                                              right: BorderSide(
                                                                  color: ColorsUtils
                                                                      .rgba(
                                                                          242,
                                                                          242,
                                                                          242,
                                                                          1)))),
                                                      alignment:
                                                          Alignment.center,
                                                      child: Text(
                                                        '-',
                                                        style: StylesUtils
                                                            .customTextStyle(
                                                          color: ColorsUtils
                                                              .color0000,
                                                        ),
                                                      ),
                                                    ),
                                                    Builder(builder: (_) {
                                                      const str = '1';
                                                      final style = StylesUtils
                                                          .customTextStyle(
                                                              fontSize:
                                                                  StylesUtils
                                                                      .fontSize13,
                                                              color: ColorsUtils
                                                                  .color0000);
                                                      double width = ToolsUtils
                                                          .calculateTextWidth(
                                                              value: str,
                                                              style: style);
                                                      double maxWidth =
                                                          width > 30
                                                              ? width + 5
                                                              : 30;
                                                      return Container(
                                                        constraints:
                                                            BoxConstraints(
                                                                minWidth: 30,
                                                                maxWidth:
                                                                    maxWidth,
                                                                maxHeight: 20,
                                                                minHeight: 20),
                                                        alignment:
                                                            Alignment.center,
                                                        child: Text(
                                                          str,
                                                          style: style,
                                                        ),
                                                      );
                                                    }),
                                                    Container(
                                                      constraints:
                                                          const BoxConstraints
                                                              .expand(
                                                              width: 25,
                                                              height: 20),
                                                      decoration: BoxDecoration(
                                                          border: Border(
                                                              left: BorderSide(
                                                                  color: ColorsUtils
                                                                      .rgba(
                                                                          242,
                                                                          242,
                                                                          242,
                                                                          1)))),
                                                      alignment:
                                                          Alignment.center,
                                                      child: Text(
                                                        '+',
                                                        style: StylesUtils
                                                            .customTextStyle(
                                                          color: ColorsUtils
                                                              .color0000,
                                                        ),
                                                      ),
                                                    )
                                                  ],
                                                ),
                                              ),
                                            ],
                                          ),
                                        )
                                      ],
                                    ))
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  );
                }
                return Container();
              }),
            ),
            Container(
              margin: const EdgeInsets.symmetric(vertical: 20),
              child: Text.rich(TextSpan(
                  style: StylesUtils.customTextStyle(
                      fontWeight: FontWeight.w700,
                      color: ColorsUtils.color0000,
                      fontSize: StylesUtils.fontSize18),
                  children: [
                    const TextSpan(
                      text: '为',
                    ),
                    TextSpan(
                        text: '/',
                        style: StylesUtils.customTextStyle(
                            fontWeight: FontWeight.w700,
                            color: ColorsUtils.colorCccc,
                            fontSize: StylesUtils.fontSize18)),
                    const TextSpan(
                      text: '您',
                    ),
                    TextSpan(
                        text: '/',
                        style: StylesUtils.customTextStyle(
                            fontWeight: FontWeight.w700,
                            color: ColorsUtils.colorCccc,
                            fontSize: StylesUtils.fontSize18)),
                    const TextSpan(
                      text: '推',
                    ),
                    TextSpan(
                        text: '/',
                        style: StylesUtils.customTextStyle(
                            fontWeight: FontWeight.w700,
                            color: ColorsUtils.colorCccc,
                            fontSize: StylesUtils.fontSize18)),
                    const TextSpan(
                      text: '荐',
                    ),
                  ])),
            ),
            StaggeredGrid.count(
              crossAxisCount: 2,
              crossAxisSpacing: 10,
              mainAxisSpacing: 15,
              children: [
                Align(
                  alignment: Alignment.centerRight,
                  child: Container(
                    width: 167,
                    padding: const EdgeInsets.only(bottom: 10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.white),
                    child: Column(
                      children: [
                        Container(
                          constraints: const BoxConstraints.expand(
                              width: 167, height: 165),
                          decoration: const BoxDecoration(
                              borderRadius: BorderRadius.vertical(
                                  top: Radius.circular(10)),
                              image: DecorationImage(
                                  image: NetworkImage(
                                      'https://img1.baidu.com/it/u=3316024464,3222833970&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'),
                                  fit: BoxFit.fill)),
                        ),
                        Container(
                          padding: const EdgeInsets.only(
                              left: 10, right: 10, top: 15),
                          child: Column(
                            children: [
                              Align(
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  '麦香鸡脚汉堡',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize15,
                                      fontWeight: FontWeight.w700,
                                      color: ColorsUtils.color0000),
                                ),
                              ),
                              Padding(
                                padding:
                                    const EdgeInsets.symmetric(vertical: 10),
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Text(
                                      '￥ 18',
                                      softWrap: true,
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize16,
                                          color: ColorsUtils.colorFf64,
                                          fontWeight: FontWeight.w700),
                                    ),
                                    Text(
                                      '月销509',
                                      softWrap: true,
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color7979,
                                          fontSize: StylesUtils.fontSize12),
                                    )
                                  ],
                                ),
                              ),
                              Container(
                                alignment: Alignment.centerLeft,
                                padding:
                                    const EdgeInsets.only(bottom: 10, top: 5),
                                child: Text(
                                  '附近热销商品',
                                  softWrap: true,
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color7979,
                                      fontSize: StylesUtils.fontSize12),
                                ),
                              ),
                              Center(
                                widthFactor: 0.75,
                                child: Container(
                                  height: 1,
                                  color: HexColor(ColorsUtils.colorF5f5),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.centerLeft,
                                child: Text.rich(TextSpan(children: [
                                  WidgetSpan(
                                      child: SvgUtils.assetName('u988',
                                          width: 12, height: 12),
                                      alignment: PlaceholderAlignment.middle),
                                  TextSpan(
                                      text: ' 华莱士-凤凰广场2店 ',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize12,
                                          color: ColorsUtils.color0000)),
                                  WidgetSpan(
                                      child: Icon(
                                        CupertinoIcons.chevron_forward,
                                        size: 12,
                                        color: HexColor(ColorsUtils.color9999),
                                      ),
                                      alignment: PlaceholderAlignment.middle)
                                ])),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.centerLeft,
                                child: Text.rich(TextSpan(children: [
                                  TextSpan(
                                    text: '20分钟 ',
                                    style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize12,
                                        color: ColorsUtils.color7979),
                                  ),
                                  TextSpan(
                                      text: '|',
                                      style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.colorCccc,
                                        fontSize: StylesUtils.fontSize12,
                                      )),
                                  TextSpan(
                                      text: '配送￥4起',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize12,
                                          color: ColorsUtils.color7979))
                                ])),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.centerLeft,
                  child: Container(
                    width: 167,
                    padding: const EdgeInsets.only(bottom: 10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.white),
                    child: Column(
                      children: [
                        Container(
                          constraints: const BoxConstraints.expand(
                              width: 167, height: 165),
                          decoration: const BoxDecoration(
                              borderRadius: BorderRadius.vertical(
                                  top: Radius.circular(10)),
                              image: DecorationImage(
                                  image: NetworkImage(
                                      'https://img1.baidu.com/it/u=3316024464,3222833970&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'),
                                  fit: BoxFit.fill)),
                        ),
                        Container(
                          padding: const EdgeInsets.only(
                              left: 10, right: 10, top: 15),
                          child: Column(
                            children: [
                              Align(
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  '麦香鸡脚汉堡',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize15,
                                      fontWeight: FontWeight.w700,
                                      color: ColorsUtils.color0000),
                                ),
                              ),
                              Padding(
                                padding:
                                    const EdgeInsets.symmetric(vertical: 10),
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Text(
                                      '￥ 18',
                                      softWrap: true,
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize16,
                                          color: ColorsUtils.colorFf64,
                                          fontWeight: FontWeight.w700),
                                    ),
                                    Text(
                                      '月销509',
                                      softWrap: true,
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color7979,
                                          fontSize: StylesUtils.fontSize12),
                                    )
                                  ],
                                ),
                              ),
                              Container(
                                alignment: Alignment.centerLeft,
                                padding:
                                    const EdgeInsets.only(bottom: 10, top: 5),
                                child: Text(
                                  '附近热销商品',
                                  softWrap: true,
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color7979,
                                      fontSize: StylesUtils.fontSize12),
                                ),
                              ),
                              Center(
                                widthFactor: 0.75,
                                child: Container(
                                  height: 1,
                                  color: HexColor(ColorsUtils.colorF5f5),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.centerLeft,
                                child: Text.rich(TextSpan(children: [
                                  WidgetSpan(
                                      child: SvgUtils.assetName('u988',
                                          width: 12, height: 12),
                                      alignment: PlaceholderAlignment.middle),
                                  TextSpan(
                                      text: ' 华莱士-凤凰广场2店 ',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize12,
                                          color: ColorsUtils.color0000)),
                                  WidgetSpan(
                                      child: Icon(
                                        CupertinoIcons.chevron_forward,
                                        size: 12,
                                        color: HexColor(ColorsUtils.color9999),
                                      ),
                                      alignment: PlaceholderAlignment.middle)
                                ])),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.centerLeft,
                                child: Text.rich(TextSpan(children: [
                                  TextSpan(
                                    text: '20分钟 ',
                                    style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize12,
                                        color: ColorsUtils.color7979),
                                  ),
                                  TextSpan(
                                      text: '|',
                                      style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.colorCccc,
                                        fontSize: StylesUtils.fontSize12,
                                      )),
                                  TextSpan(
                                      text: '配送￥4起',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize12,
                                          color: ColorsUtils.color7979))
                                ])),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.centerRight,
                  child: Container(
                    width: 167,
                    padding: const EdgeInsets.only(bottom: 10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.white),
                    child: Column(
                      children: [
                        Container(
                          constraints: const BoxConstraints.expand(
                              width: 167, height: 165),
                          decoration: const BoxDecoration(
                              borderRadius: BorderRadius.vertical(
                                  top: Radius.circular(10)),
                              image: DecorationImage(
                                  image: NetworkImage(
                                      'https://img2.baidu.com/it/u=4212075512,1580634758&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'),
                                  fit: BoxFit.fill)),
                        ),
                        Container(
                          padding: const EdgeInsets.only(
                              left: 10, right: 10, top: 15),
                          child: Column(
                            children: [
                              Align(
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  '百事可乐（小杯）',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize15,
                                      fontWeight: FontWeight.w700,
                                      color: ColorsUtils.color0000),
                                ),
                              ),
                              Padding(
                                padding:
                                    const EdgeInsets.symmetric(vertical: 10),
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Text(
                                      '￥ 18',
                                      softWrap: true,
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize16,
                                          color: ColorsUtils.colorFf64,
                                          fontWeight: FontWeight.w700),
                                    ),
                                    Text(
                                      '月销509',
                                      softWrap: true,
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color7979,
                                          fontSize: StylesUtils.fontSize12),
                                    )
                                  ],
                                ),
                              ),
                              Container(
                                alignment: Alignment.centerLeft,
                                padding:
                                    const EdgeInsets.only(bottom: 10, top: 5),
                                child: Text(
                                  '附近热销商品',
                                  softWrap: true,
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color7979,
                                      fontSize: StylesUtils.fontSize12),
                                ),
                              ),
                              Center(
                                widthFactor: 0.75,
                                child: Container(
                                  height: 1,
                                  color: HexColor(ColorsUtils.colorF5f5),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.centerLeft,
                                child: Text.rich(TextSpan(children: [
                                  WidgetSpan(
                                      child: SvgUtils.assetName('u988',
                                          width: 12, height: 12),
                                      alignment: PlaceholderAlignment.middle),
                                  TextSpan(
                                      text: ' 华莱士-凤凰广场2店 ',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize12,
                                          color: ColorsUtils.color0000)),
                                  WidgetSpan(
                                      child: Icon(
                                        CupertinoIcons.chevron_forward,
                                        size: 12,
                                        color: HexColor(ColorsUtils.color9999),
                                      ),
                                      alignment: PlaceholderAlignment.middle)
                                ])),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.centerLeft,
                                child: Text.rich(TextSpan(children: [
                                  TextSpan(
                                    text: '20分钟 ',
                                    style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize12,
                                        color: ColorsUtils.color7979),
                                  ),
                                  TextSpan(
                                      text: '|',
                                      style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.colorCccc,
                                        fontSize: StylesUtils.fontSize12,
                                      )),
                                  TextSpan(
                                      text: '配送￥4起',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize12,
                                          color: ColorsUtils.color7979))
                                ])),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.centerLeft,
                  child: Container(
                    width: 167,
                    padding: const EdgeInsets.only(bottom: 10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.white),
                    child: Column(
                      children: [
                        Container(
                          constraints: const BoxConstraints.expand(
                              width: 167, height: 165),
                          decoration: const BoxDecoration(
                              borderRadius: BorderRadius.vertical(
                                  top: Radius.circular(10)),
                              image: DecorationImage(
                                  image: NetworkImage(
                                      'https://img2.baidu.com/it/u=2154553597,2576787779&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'),
                                  fit: BoxFit.fill)),
                        ),
                        Container(
                          padding: const EdgeInsets.only(
                              left: 10, right: 10, top: 15),
                          child: Column(
                            children: [
                              Align(
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  '百世可乐（中杯）',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize15,
                                      fontWeight: FontWeight.w700,
                                      color: ColorsUtils.color0000),
                                ),
                              ),
                              Padding(
                                padding:
                                    const EdgeInsets.symmetric(vertical: 10),
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Text(
                                      '￥ 18',
                                      softWrap: true,
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize16,
                                          color: ColorsUtils.colorFf64,
                                          fontWeight: FontWeight.w700),
                                    ),
                                    Text(
                                      '月销509',
                                      softWrap: true,
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color7979,
                                          fontSize: StylesUtils.fontSize12),
                                    )
                                  ],
                                ),
                              ),
                              Container(
                                alignment: Alignment.centerLeft,
                                padding:
                                    const EdgeInsets.only(bottom: 10, top: 5),
                                child: Text(
                                  '附近热销商品',
                                  softWrap: true,
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color7979,
                                      fontSize: StylesUtils.fontSize12),
                                ),
                              ),
                              Center(
                                widthFactor: 0.75,
                                child: Container(
                                  height: 1,
                                  color: HexColor(ColorsUtils.colorF5f5),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.centerLeft,
                                child: Text.rich(TextSpan(children: [
                                  WidgetSpan(
                                      child: SvgUtils.assetName('u988',
                                          width: 12, height: 12),
                                      alignment: PlaceholderAlignment.middle),
                                  TextSpan(
                                      text: ' 华莱士-凤凰广场2店 ',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize12,
                                          color: ColorsUtils.color0000)),
                                  WidgetSpan(
                                      child: Icon(
                                        CupertinoIcons.chevron_forward,
                                        size: 12,
                                        color: HexColor(ColorsUtils.color9999),
                                      ),
                                      alignment: PlaceholderAlignment.middle)
                                ])),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.centerLeft,
                                child: Text.rich(
                                  TextSpan(
                                    children: [
                                      TextSpan(
                                        text: '20分钟 ',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize12,
                                            color: ColorsUtils.color7979),
                                      ),
                                      TextSpan(
                                          text: '|',
                                          style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.colorCccc,
                                            fontSize: StylesUtils.fontSize12,
                                          )),
                                      TextSpan(
                                        text: '配送￥4起',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize12,
                                            color: ColorsUtils.color7979),
                                      )
                                    ],
                                  ),
                                ),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
            Container(
              height: 50,
              alignment: Alignment.center,
              child: Text(
                '已经到底',
                softWrap: true,
                style:
                    StylesUtils.customTextStyle(color: ColorsUtils.color7979),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget get checkbox {
    return Container(
      constraints: const BoxConstraints.expand(width: 20, height: 20),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          border: Border.all(color: HexColor(ColorsUtils.colorCccc))),
    );
  }

  Widget get checkboxDis {
    return Container(
      constraints: const BoxConstraints.expand(width: 20, height: 20),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: HexColor(ColorsUtils.colorF2f2)),
    );
  }
}

class _MyAddOrReduce extends CustomPainter {
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return this != oldDelegate;
  }

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = ColorsUtils.rgba(242, 242, 242, 1)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1;

    final rect = Rect.fromLTWH(0.0, 0.0, size.width, size.height);
    const radius = Radius.circular(3);
    canvas.drawRRect(
        RRect.fromRectAndCorners(
          rect,
          topLeft: radius,
          topRight: radius,
          bottomLeft: radius,
          bottomRight: radius,
        ),
        paint);
  }
}
